import React, { useEffect, useState } from "react";
import { Card, Form, Select, Input } from "antd";
import { getAllSmsSign } from "../../services/messageTemplateApi";

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 4 }
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 20 }
  }
};

const { Option } = Select;

const MessageConfig = ({ form }) => {
  const { getFieldDecorator } = form;
  const [msgTpls, setMsgTpls] = useState([]);
  useEffect(() => {
    async function getMsgTpls() {
      try {
        const res = await getAllSmsSign();
        const { errCode, datas } = res;
        if (errCode === 0) {
          setMsgTpls(datas);
        }
      } catch (err) {
        // eslint-disable-next-line no-console
        console.warn(err);
      }
    }
    getMsgTpls();
  }, []);

  return (
    <Card title="渠道配置" style={{ marginTop: 16, marginBottom: 48 }}>
      <Form {...formItemLayout} style={{ width: 800 }} onSubmit={() => {}}>
        <Form.Item
          label="短信签名模板 Code"
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
        >
          {getFieldDecorator("smsTemplateCode", {
            rules: [
              {
                required: true,
                message: "请选择短信签名模板"
              }
            ]
          })(
            <Select
              style={{ width: 398 }}
              getPopupContainer={triggerNode => triggerNode}
            >
              {msgTpls.map(item => (
                <Option key={item.smsTemplateCode} value={item.smsTemplateCode}>
                  {item.signName}
                </Option>
              ))}
            </Select>
          )}
        </Form.Item>
        <Form.Item label="Endpoint">
          {getFieldDecorator("endpoint", {
            rules: [
              {
                required: true,
                message: "请输入 endpoint"
              }
            ]
          })(<Input style={{ width: 466 }} />)}
        </Form.Item>
      </Form>
    </Card>
  );
};

export default MessageConfig;
